<template>
    <view>
        <uni-nav-bar fixed left-icon="back" title="确认订单" @clickLeft="clickLeft()"></uni-nav-bar>
        <view class="l_box">
            <uni-forms :value="addressData" ref="form" :rules="rules" err-show-type="undertext" labelWidth="180">
                <uni-forms-item label="联系人:" required name="userName">
                    <uni-easyinput :inputBorder="false" v-model="addressData.userName" type="text" placeholder="请填写真实姓名" />
                </uni-forms-item>
                <uni-forms-item label="手机号:" required name="phone">
                    <uni-easyinput :inputBorder="false" v-model="addressData.phone" type="number" placeholder="请填写手机号" />
                </uni-forms-item>
                <uni-forms-item required label="租借日期:" name="businName">
                    <view class="tui-flex" @tap="openDate">
                        <view v-if="addressData.useStartDate == ''"
                              style="flex: 1;font-size: 34rpx;color: grey;padding-left: 20rpx">
                            请选择
                        </view>
                        <view v-else style="flex: 1;font-size: 32rpx" >
                            {{addressData.useStartDate}}
                        </view>
                    </view>
                </uni-forms-item>
            </uni-forms>
        </view>

        <view class="l_box">
            <view class="tui-flex" style="background: #f8f8f8;padding: 6rpx 15rpx;">
                <view class="image">
                    <img class="det-img" :src="data.pic" alt="">
                </view>
                <view class="tui-book-name">
                    <view class="title">{{data.name}}</view>
                    <view style="color: #999;">{{data.description}}</view>
                    <view class="txt">￥<text class="price">{{data.rent}}</text></view>
                </view>
            </view>
            <view class="tui-flex">
                <view class="flex-num">数量:</view>
                <view class="num-box">
                    <number-box :value="addressData.num"
                                :min="0"
                                :disabled="true"
                                :step="1"
                                @change="daysChange">
                    </number-box>
                </view>
            </view>
            <view class="tui-flex ui-dashed">
                <view class="flex-num">租金:</view>
                <view class="txt">+￥<text class="price">{{data.rent}}</text></view>
            </view>
            <view class="tui-flex ui-dashed">
                <view class="flex-num">押金:</view>
                <view class="txt">+￥<text class="price">{{data.deposit}}</text></view>
            </view>
            <view class="num-bot">
                <view>小计：<text style="color: #dd524d;">￥{{totalMoney}}</text></view>
            </view>
        </view>

        <pay-btn :amount="totalMoney" title="总计" payText="提交订单" @imPayment="imPayment"></pay-btn>

        <good-date-picker ref="goodDatePicker" @change="changeDate" :option="goodDatePickerOption"/>

    </view>
</template>

<script>
    import uniForms from '@/components/bjx-form/uni-forms.vue'
    import uniFormsItem from '@/components/bjx-form/uni-forms-item.vue'
    import uniEasyinput from '@/components/bjx-form/uni-easyinput.vue'
    import payBtn from '@/components/payBtn/index'
    import numberBox from '@/components/uni-number-box/number-box.vue'
    import GoodDatePicker from '@/components/good-date-picker/good-date-picker.vue'

    export default {
        name: "leaseOrder.vue",
        components: { uniForms, uniFormsItem, uniEasyinput, payBtn, numberBox, GoodDatePicker },
        data() {
            return {
                data: {},
                addressData: {
                    userName: '',
                    phone: '',
                    num: 1,
                    useStartDate: ''
                },
                rules: {},
                totalMoney: '',
                goodDatePickerOption: {
                    chooseOneDate: "", //根据实际业务需求设置的默认单选日期，可为空,默认今天
                    initStartDate: '', //可选起始时间限制，可为空,默认今天
                    initEndDate: '', //可选结束时间限制，可为空,默认4个月后
                    isRange: false, //是否开启范围选择，必填
                    isModal:true,//是否弹窗模式，默认false
                    isShowSubmit:false,//页面模式中是否显示页面模式底部的确定按钮，默认false
                    startText: '开始',
                    endText: '结束'
                },
                list: []
            }
        },
        onLoad(option) {
            this.data = JSON.parse(option.data)
            this.list.unshift(this.data)
            console.log(this.data)
            let num = this.data.deposit
            this.totalMoney = Number(num.toFixed(2))
        },
        methods: {
            imPayment() {
                let data = this.addressData
                if(!data.userName){
                    uni.showModal({ content: '请填写联系人', showCancel: false });
                    return;
                }
                var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/
                if(!myreg.test(data.phone)){
                    uni.showModal({ content: '手机号格式不正确', showCancel: false });
                    return;
                }
                if(!data.useStartDate){
                    uni.showModal({ content: '请选择租借日期', showCancel: false });
                    return;
                }
                this.list.forEach(i => {
                    this.$set(i,'title',this.data.name)
                    this.$set(i,'productName',this.data.name)
                    this.$set(i,'pics',this.data.pics)
                    this.$set(i,'num',this.addressData.num)
                    this.$set(i,'businId',this.data.businId)
                    this.$set(i, 'productNo',this.data.sn)
                    this.$set(i, 'price',this.data.price)
                    this.$set(i, 'skuId',this.data.id)
                    this.$set(i, 'stock',this.data.stock)
                    // this.$set(i, 'type', 1)
                    this.$set(i, 'rentUnit',this.data.rentUnit)
                    return
                })
                let editForm = {
                    cartProductDtoList: this.list,
                    actAmount: this.totalMoney,
                    totalAmount: this.totalMoney,
                    ownSpec: JSON.stringify(this.addressData)
                }
                uni.showLoading()
                this.$api.api('lease.create', editForm).then(res => {
                    uni.hideLoading();
                    if (res.code == 200 ) {
                        // if (this.totalMoney != 0) {
                            this.$wx.miniProgram.reLaunch({
                                url: `/pages/pay/pay?money=${this.totalMoney}&orderNo=${res.data.orderNo}&orderId=${this.data.id}&productType=5`,
                                success: function(){
                                    console.log('success')
                                },
                                fail: function(err){
                                },
                                complete:function(){
                                    console.log('complete');
                                }
                            });
                        // } else {
                        //     uni.navigateTo({
                        //         url: '/pagesA/order/order?state=3'
                        //     })
                        // }
                    } else {
                        this.$api.msg(res.message)
                    }
                })
            },
            //数量
            daysChange(e) {
                this.addressData.num = e
                this.calcTotal()
            },
            calcTotal() {
                let total = 0;
                let price = this.data.deposit
                total += price * this.addressData.num
                this.totalMoney = Number(total.toFixed(2));
            },
            openDate() { //打开日期弹窗
                this.$refs.goodDatePicker.open();
            },
            changeDate(e) {
                this.addressData.useStartDate = e.currentDate;
            },
        }
    }
</script>

<style lang="scss" scoped>
.l_box {
    background: #fff;
    margin: 30rpx 20rpx;
    border-radius: 15rpx;
    padding: 30rpx;
    .image {
        width: 30%;
        padding-right: 20rpx;
        height: 140rpx;
        .det-img {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
        }
    }
    .tui-book-name {
        flex: 1;
        .title {
            font-size: 32rpx;
        }
    }
    .txt {
        font-size: 36rpx;
    }
    .flex-num {
        flex: 1;
        text-align: left;
        font-size: 34rpx;
    }
    .ui-dashed {
        border-bottom: 1px dashed #eee;
        padding: 15rpx 0;
    }
    .num-bot {
        font-size: 40rpx;
        text-align: right;
        padding-top: 10rpx;
    }
}
</style>